<template>
<div>
<el-col :span="24">
  <el-row> 
    <el-col :span="24"><div class="grid-content">
      <el-col :span="12">
        <el-input v-model="filters[0].value" placeholder="搜索框"></el-input>  
      </el-col>
      &nbsp;&nbsp;<el-button type="primary" @click="add">新增条目</el-button>

        <data-tables :data="data" :filters="filters" :action-col="actionCol">
          <el-table-column v-for="title in titles" :prop="title.prop" :label="title.label" :key="title.prop"   sortable="custom" >
          </el-table-column>
        </data-tables>
      </div></el-col>
  </el-row>


  <el-dialog title="修改字段" :visible.sync="dialogFormVisible">
    <el-form :model="form">
      <el-form-item label="硬件序列号" :label-width="formLabelWidth">
        <el-input v-model="form.number" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="品牌编号" :label-width="formLabelWidth">
        <el-input v-model="form.name" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="管理卡IP" :label-width="formLabelWidth">
        <el-input v-model="form.gip" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="物理机IP" :label-width="formLabelWidth">
        <el-input v-model="form.wip" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="机房" :label-width="formLabelWidth">
        <el-input v-model="form.jifang" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="机柜" :label-width="formLabelWidth">
        <el-input v-model="form.jigui" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="机柜编号" :label-width="formLabelWidth">
        <el-input v-model="form.jiguinumber" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="简明配置" :label-width="formLabelWidth">
        <el-input v-model="form.peizhi" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="业务" :label-width="formLabelWidth">
        <el-input v-model="form.yewu" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="模块" :label-width="formLabelWidth">
        <el-input v-model="form.mokuai" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="备注" :label-width="formLabelWidth">
        <el-input v-model="form.beizhu" autocomplete="off"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="input">确 定</el-button>
    </div>
  </el-dialog>
</el-col>
</div>
</template>

<script>
import { vue_bigdata, vue_bigdata_post, vue_bigdata_delete } from '@/api/query'
export default {
  // inject:['reload'], 
  data() {
    return {
      // indextab: false,
      show: true,
      dialogFormVisible: false,
      form: {
          name: '',
          number: '',
          gip:'',
          wip: '',
          jifang: '',
          jigui:'',
          jiguinumber: '',
          peizhi: '',
          yewu:'',
          mokuai: '',
          beizhu: '',
          // date1: '',
          // date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: '',
        },
        formLabelWidth: '120px',
      data: [
      ],
      titles: [{
        prop: 'number',
        label: '硬件序列号'
      },{
        prop: 'name',
        label: '品牌编号'	
      },{
        prop: 'gip',
        label: '管理卡IP'
      },{
        prop: 'wip',
        label: '物理机IP'
      },{
        prop: 'jifang',
        label: '机房'
      },{
        prop: 'jigui',
        label: '机柜'
      },{
        prop: 'jiguinumber',
        label: '机柜编号'
      },{
        prop: 'peizhi',
        label: '简明配置'
      },{
        prop: 'yewu',
        label: '业务'
      },{
        prop: 'mokuai',
        label: '模块'
      },{
        prop: 'beizhu',
        label: '备注'
      }],
      actionCol: {
              label: '操作',
              props: {
                align: 'center',
              },
              buttons: [{
                props: {
                  type: 'primary',
                  icon: 'el-icon-edit'
                },
                handler: row => {
                  this.dialogFormVisible = true
                  console.log(row);
                  this.form.name = row.name
                  this.form.number = row.number
                  this.form.gip = row.gip
                  this.form.wip = row.wip
                  this.form.jifang = row.jifang
                  this.form.jigui = row.jigui
                  this.form.jiguinumber = row.jiguinumber
                  this.form.peizhi = row.peizhi
                  this.form.yewu = row.yewu
                  this.form.mokuai = row.mokuai
                  this.form.beizhu = row.beizhu
                },
                label: 'Edit'
              }, {
                handler: row => {
                  this.data.splice(this.data.indexOf(row), 1),
                  console.log(row.name)
                  this.$message('number: '+row.number+'删除完毕')
                  var param={number : row.number}
                  console.log(param);
                  vue_bigdata_delete(param).then(response => {
                    console.log(response.data)
                 })
                },
                label: 'delete'
              }]
            },
      filters: [
        {
          prop: ['name','number','gip','wip','jifang','jigui','jiguinumber','peizhi','yewu','mokuai','beizhu'],
          value: '',  
        }
      ],
      
    }
  },
  created() {    
    this.vue_bigdata() 
  },
	methods: {
        vue_bigdata(){
            vue_bigdata().then(response => {
                console.log(response.data)
                this.data = response.data
            })
        },

        sumbit(){
            k8s_zhiyi_dep_vue({"value": this.value,"image": this.image,"user": this.GetUser}).then(response => {
                this.message2 = response.data
            })
        },

        input() {
            vue_bigdata_post({ 
                "name": this.form.name,
                "number":this.form.number,
                "gip":this.form.gip,
                "wip": this.form.wip,
                "jifang":this.form.jifang,
                "jigui":this.form.jigui,
                "jiguinumber": this.form.jiguinumber,
                "peizhi":this.form.peizhi,
                "yewu":this.form.yewu,
                "mokuai": this.form.mokuai,
                "beizhu":this.form.beizhu}).then(response => {
                console.log(response.data)
                this.vue_bigdata();
        })
        this.dialogFormVisible = false
        },

    add(){
      this.form.name = '',
      this.form.number= '',
      this.form.gip='',
      this.form.wip= '',
      this.form.jifang= '',
      this.form.jigui='',
      this.form.jiguinumber= '',
      this.form.peizhi= '',
      this.form.yewu='',
      this.form.mokuai= '',
      this.form.beizhu=''
      this.dialogFormVisible = true
  },


},
}
</script>
<style>
</style>